<template>
  <div class="app-container">
    <div v-if="user && user.name">
      <el-row :gutter="20">

        <el-col :span="6" :xs="24">
          <user-card :user="user" />
        </el-col>

        <el-col :span="18" :xs="24">
          <Account />
        </el-col>

      </el-row>
    </div>
    <div v-else>
      <el-card>
        <div class="empty-text">加载用户信息中...</div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/store/user'
import UserCard from './components/UserCard.vue'
import Account from './components/Account.vue'

const userStore = useUserStore()
const user = ref({})

const name = computed(() => userStore.name)
const avatar = computed(() => userStore.avatar)
const roles = computed(() => userStore.roles)

const getUser = () => {
  // 确保所有必要的属性都有默认值
  user.value = {
    name: name.value || '',
    role: roles.value && roles.value.length > 0 ? roles.value.join(' | ') : 'user',
    email: 'admin@test.com',
    avatar: avatar.value || 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
  }
  console.log('User profile data:', user.value)
}

onMounted(() => {
  getUser()
})
</script>
